<script setup lang="ts">
import useResize from "@/hooks/useResize";
import * as echarts from "echarts";
import 'echarts-gl';
import { nextTick, onUnmounted, ref, shallowReactive, watch } from "vue";
interface Props {
  option: Object
}
const props = defineProps<Props>()
const state = shallowReactive({ echart: null as echarts.ECharts | null })

const dom = ref<HTMLDivElement>()

watch(() => props.option, () => {
  nextTick(() => {
    if (dom.value && !state.echart) {
      state.echart = echarts.init(dom.value);
      setOption();
    }
  })
}, { immediate: true })
function setOption() {
  if (dom.value) {
    if (!state.echart) {
      state.echart = echarts.init(dom.value);
    }
    state.echart.setOption(
      props.option as any
    );
  }
}
useResize(resize)

onUnmounted(() => {
  state.echart?.dispose();
});
function resize() {
  if (state.echart) {
    state.echart.resize();
  }
}
</script>
<template>
  <div ref="dom"></div>
</template>
<style module></style>